<template>
  <div class="dateManage">
    <el-calendar>
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{date, data}">
        <div class="dateItem" @click="handleDateClick(date, data)" :class="{
          has: (dataMap[data.day]) && (dataMap[data.day].raceList.length > 0 || dataMap[data.day].trainList.length > 0)
        }">
          <div class="date">{{ data.day }}</div>
          <div class="race" v-if="dataMap[data.day]">
            <div class="raceContent">比赛名称：{{ dataMap[data.day].raceList[0].name }}</div>
          </div>
          <div class="train" v-if="dataMap[data.day]">
            <div class="trainContent">训练内容：{{ dataMap[data.day].trainList[0].content }}</div>
          </div>
        </div>
      </template>
    </el-calendar>
    <dateDialog :dateDialogShow.sync="dateDialogShow" v-if="dateDialogShow" :curInfo="curInfo"></dateDialog>
  </div>
</template>

<script>
import dateDialog from './components/dateDialog.vue';
export default {
  components: {
    dateDialog
  },
  data() {
    return {
      dateDialogShow: true,
      curInfo: {},
      dataMap: {
        '2024-12-03': {
          raceList: [
            {
              id: '123',
              name: '2024级新生杯',
              area: '篮球场',
              time: '2024-12-03 18:00',
              userList: [
                {
                  name: '张三',
                  id: '1',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                },
              ],
              refereeList: [
                {
                  name: '裁判1',
                  id: '1'
                },
                {
                  name: '裁判2',
                  id: '2'
                },
              ]
            },
            {
              id: '12348',
              name: '2024级新生杯',
              area: '篮球场',
              time: '2024-12-03 18:00',
              userList: [
                {
                  name: '张三',
                  id: '1',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                },
              ],
              refereeList: [
                {
                  name: '裁判1',
                  id: '1'
                },
                {
                  name: '裁判2',
                  id: '2'
                },
              ]
            },
          ],
          trainList: [
            {
              id: '1234',
              name: '2024级新生杯',
              area: '篮球场',
              time: '2024-12-03 18:00',
              content: '魔鬼训练',
            },
            {
              id: '12345',
              name: '2024级新生杯',
              area: '篮球场',
              time: '2024-12-03 18:00',
              content: '',
            },
          ]
        },
        '2024-12-04': {
          raceList: [
            {
              id: '123',
              name: '2024级新生杯',
              area: '篮球场',
              time: '2024-12-03 18:00',
              userList: [
                {
                  name: '张三',
                  id: '1',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                },
              ],
              refereeList: [
                {
                  name: '裁判1',
                  id: '1'
                },
                {
                  name: '裁判2',
                  id: '2'
                },
              ]
            },
            {
              id: '12348',
              name: '2024级新生杯',
              area: '篮球场',
              time: '2024-12-03 18:00',
              userList: [
                {
                  name: '张三',
                  id: '1',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                },
              ],
              refereeList: [
                {
                  name: '裁判1',
                  id: '1'
                },
                {
                  name: '裁判2',
                  id: '2'
                },
              ]
            },
          ],
          trainList: [
            {
              id: '1234',
              name: '2024级新生杯',
              area: '篮球场',
              time: '2024-12-03 18:00',
              content: '魔鬼训练',
            },
            {
              id: '12345',
              name: '2024级新生杯',
              area: '篮球场',
              time: '2024-12-03 18:00',
              content: '',
            },
          ]
        },
        '2024-12-01': {
          raceList: [
            {
              id: '123',
              name: '2024级新生杯',
              area: '篮球场',
              time: '2024-12-03 18:00',
              userList: [
                {
                  name: '张三',
                  id: '1',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                },
              ],
              refereeList: [
                {
                  name: '裁判1',
                  id: '1'
                },
                {
                  name: '裁判2',
                  id: '2'
                },
              ]
            },
            {
              id: '12348',
              name: '2024级新生杯',
              area: '篮球场',
              time: '2024-12-03 18:00',
              userList: [
                {
                  name: '张三',
                  id: '1',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                },
              ],
              refereeList: [
                {
                  name: '裁判1',
                  id: '1'
                },
                {
                  name: '裁判2',
                  id: '2'
                },
              ]
            },
          ],
          trainList: [
            {
              id: '1234',
              name: '2024级新生杯',
              area: '篮球场',
              time: '2024-12-03 18:00',
              content: '魔鬼训练',
            },
            {
              id: '12345',
              name: '2024级新生杯',
              area: '篮球场',
              time: '2024-12-03 18:00',
              content: '',
            },
          ]
        },
        '2024-12-09': {
          raceList: [
            {
              id: '123',
              name: '2024级新生杯',
              area: '篮球场',
              time: '2024-12-03 18:00',
              userList: [
                {
                  name: '张三',
                  id: '1',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                },
              ],
              refereeList: [
                {
                  name: '裁判1',
                  id: '1'
                },
                {
                  name: '裁判2',
                  id: '2'
                },
              ]
            },
            {
              id: '12348',
              name: '2024级新生杯',
              area: '篮球场',
              time: '2024-12-03 18:00',
              userList: [
                {
                  name: '张三',
                  id: '1',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '李三',
                  id: '2',
                  team: 'A队'
                },
                {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                }, {
                  name: '王五',
                  id: '3',
                  team: 'B队'
                },
              ],
              refereeList: [
                {
                  name: '裁判1',
                  id: '1'
                },
                {
                  name: '裁判2',
                  id: '2'
                },
              ]
            },
          ],
          trainList: [
            {
              id: '1234',
              name: '2024级新生杯',
              area: '篮球场',
              time: '2024-12-03 18:00',
              content: '魔鬼训练',
            },
            {
              id: '12345',
              name: '2024级新生杯',
              area: '篮球场',
              time: '2024-12-03 18:00',
              content: '',
            },
          ]
        },
      }
    };
  },
  created() {
    this.curInfo = this.dataMap['2024-12-03'];
  },
  mounted() {


  },
  methods: {
    handleDateClick(date, data) {
      console.log(date, data, this.dataMap[data.day]);
      this.curInfo = this.dataMap[data.day];
    }
  },
};
</script>

<style lang="less" scoped>
.dateManage {
  height: 100%;

  .dateItem {
    // height: 100%;

  }

  .el-calendar {
    height: 100%;
    display: flex;
    flex-direction: column;

    ::v-deep {
      .el-calendar__body {
        flex: 1;

        .el-calendar-table {
          height: 100%;

          .el-calendar-day {
            height: 111px;

            .dateItem {
              height: 100%;
              padding: 5px;
            }
          }

          .el-calendar-table__row {
            .current {
              // display: flex;
              // flex-direction: column;
            }
          }

        }
      }
    }
  }

  .has {
    color: #333;
    font-size: 12px;
    // background-color: #fce4dd !important;
    border-radius: 5px;
    display: flex;
    flex-direction: column;

    .date {
      text-align: center;

    }

    .race {
      flex: 1;
      margin-bottom: 5px;
      background-color: #37d471;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      border-radius: 5px;
      /* 控制显示的行数 */
    }

    .train {
      flex: 1;
      background-color: #ffc1b6;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      border-radius: 5px;
      -webkit-line-clamp: 2;
      /* 控制显示的行数 */
    }
  }
}
</style>
